<template>
    <div class="app-container calendar-list-container" v-loading="loading" element-loading-text="正在导出数据">
    <!-- filter 条件查询 -->
    <div class="filter-container">
      <el-input
        @keyup.enter.native="getData"
        clearable
        v-model="param.workOrderNo"
        style="width: 150px;margin-right:15px;margin-top:7px"
        class="filter-item"
        placeholder="请输入工单单号"
      ></el-input>
      <el-input
        @keyup.enter.native="getData"
        clearable
        v-model="param.orderType"
        style="width: 150px;margin-right:15px;margin-top:7px"
        class="filter-item"
        placeholder="请输入工单单别"
      ></el-input>


      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="getData">查询</el-button>

    </div>

    <!-- table 表格 -->
    <el-table  :data="tableInfo" v-loading="loadingList" element-loading-text="给我一首歌的时间" stripe border fit highlight-current-row style="width: 100%">
      <el-table-column  label="序号" type="index" align="center" width="80px"/>
      <el-table-column  label="工序"  prop="processName"   align="center"/>
      <el-table-column  label="排产序号"  prop="planNo"   align="center"/>
      <el-table-column  label="工单号"  prop="orderNo"   align="center"/>
      <el-table-column  label="客户品号" prop='technologyNo' align="center"/>
      <el-table-column  label="完成率(%)" prop='percent' align="center">
        <!-- <template slot-scope="scope">
            <el-progress :percentage="scope.row.percent" :color="customColors" :stroke-width="10"></el-progress>
        </template> -->
      </el-table-column>
    </el-table>
   
   <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.page"
        :page-sizes="[5,10, 20, 30, 40, 100, 300, 500]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <el-divider></el-divider>

    <el-button type="success" size="small" @click="hExportExcel">导出数据Excel</el-button>
    
  </div>
</template>

<script>
import { findSchedule } from '@/api/CNCmachine.js'
export default {
    name: 'progressBar',
    data () {
        return {
            listQuery: {
                page: 1,                                    //页码
                limit: 10                                   //每页多少条记录
            },
            param: {
              workOrderNo:'',                   //工单单号
              orderType:''                      //工单单别
            },
            modifyform: {
                sectionNo: '',                              //工段编号
                machineId: '',                              //机台号
                machineName: '',                            //机台名
                jobClass: ''                                //职级
            },
            formLabelWidth: '100px',
            searchInputStyle: 'width: 150px;margin-right:15px;',
            total: 0,                                      //数据的总数
            tableInfo: [],
            dialogFormVisible: false,
            customColors: [
                {color: '#f56c6c', percentage: 20},
                {color: '#e6a23c', percentage: 40},
                {color: '#5cb87a', percentage: 60},
                {color: '#1989fa', percentage: 80},
                {color: '#6f7ad3', percentage: 100}
            ],
            loading: false,
            loadingList: false
        }
    },
    methods: {
          transformDat(res) {
          const mapInfo = {
            index: '序号',
            processName: '工序',
            orderNo: '工单号',
            planNo: '排产序号',
            technologyNo: '客户品号',
            percent: '完成率'
          }
          // 对data进行格式化
          // 取出所有的属性名
          const props = Object.keys(res[0]) // ['id','']
          console.log(props)
          // 将属性名从英文转为中文
          const header = props.map(zhkey => mapInfo[zhkey])
          console.log('中文的表头', header)
          // const data=[['xxxx','总裁办'，'13800000']]
          const data = res.map(obj => Object.values(obj))
          console.log(data)
          return { header, data }
        },
        // 导出excel
        async hExportExcel() {
          this.loading = true
          let query = Object.assign({},this.listQuery)
          if(this.param.workOrderNo){query.workOrderNo = this.param.workOrderNo}
          if(this.param.orderType){query.orderType = this.param.orderType}
          query.page = 1
          query.limit = 10000
          console.log('%c导出excel传的参数query:','color:green;font-size:16px;')
          console.log(query)

          let datas = await findSchedule(query)
          let errMsg = datas.msg
          if(datas.code != '1') return this.$message({
            type: 'warning',
            message: errMsg
            })
          let datas1 = JSON.parse(JSON.stringify(datas.data.list))
          datas1.forEach(item => {
            item.orderNo = item.orderType + '-' + item.workOrderNo
            item.percent = ((parseInt(item.mesCompletionQuantity)/parseInt(item.predictOutput))*100).toFixed(2)
          });
          const { header, data } = this.transformDat(this.setSort(datas1))
            import('@/vendor/Export2Excel').then(excel => {
            // excel表示导入的模块对象
            console.log(excel)
            excel.export_json_to_excel({
            header, // 表头 必填
            data, // 具体数据 必填
            filename: '生产进度excel', // 文件名称
            autoWidth: true, // 宽度是否自适应
            bookType: 'xlsx' // 生成的文件类型
            })
          })
          this.loading = false
        },
        // 排序函数
        setSort(arr){
          let newArr = JSON.parse(JSON.stringify(arr))
          let arr1 = []
          newArr.forEach((item,index)=>{
            let obj = {
              index: index+1,
              processName: item.processName,
              planNo: item.planNo,
              orderNo: item.orderNo,
              technologyNo: item.technologyNo,
              percent: item.percent
            }
            arr1.push(obj)
          })
          return arr1
        },
        getData() {
          this.listQuery.page = 1
          this.listQuery.limit = 10
          this.handleFilter()
        },
        async handleFilter() {
          this.loadingList = true
          let query = Object.assign({},this.listQuery)
          if(this.param.workOrderNo){query.workOrderNo = this.param.workOrderNo}
          if(this.param.orderType){query.orderType = this.param.orderType}
          let data = await findSchedule(query)
          let errMsg = data.msg
          if(data.code == '1'){
            let datas = JSON.parse(JSON.stringify(data.data.list))
            datas.forEach(item => {
              item.orderNo = item.orderType + '-' + item.workOrderNo
              item.percent = ((parseInt(item.mesCompletionQuantity)/parseInt(item.predictOutput))*100).toFixed(2)
            });
            this.tableInfo = datas
            this.total = data.data.totle
          } else{
            this.$message({
              type: 'warning',
              message: errMsg
            })
          }
          this.loadingList = false
        },
        // table表单下方的页码组件改变每页显示的数据条数
        handleSizeChange(val) {
          this.listQuery.limit = val
          this.handleFilter()
        },
        // table表单下方的页码组件改变页面
        handleCurrentChange(val) {
          this.listQuery.page = val
          this.handleFilter()
        }
    },
    // 进入页面获取table信息
    mounted() {
        this.handleFilter()
    }
}
</script>

<style>

</style>